<template>
  <div
    ref="chartRef"
    :style="{'width': '100%', 'height': _height ? _height : '100%'}">
    <!-- Element UI Dialog 用于修改Y轴范围 -->
  </div>
</template>
<script setup lang='ts'>
import * as Echarts from 'echarts'
import themeEcharts from '/@/assets/css/themeEcharts'
import { ref, onMounted, watch } from 'vue'


  interface Props {
    yAxisControl: Boolean,
    index: Number,
    title: Object,
    legend: Object,
    dataset:Object,
    grid:Object,
    axisPointer:Object,
    xAxis:Array<String>,
    yAxis:Array<String>,
    polar:Object,
    radiusAxis:Object,
    angleAxis:Object,
    radar:Object,
    dataZoom:Array<String>,
    visualMap:Object,
    tooltip:Object,
    toolbox:Object,
    brush:Object,
    geo:Object,
    parallel:Object,
    parallelAxis:Object,
    singleAxis:Object,
    timeline:Object,
    series:Array<String>,
    color:Array<String>,
    backgroundColor:String,
    group:String,
    data:[Array<String>, Object],
    graphic:Array<String>,
    useUTC:Boolean,
    _height:String,
    touchOffResize:Boolean
  }
  const props: Props = withDefaults(defineProps<Props>(), {
    yAxisControl: false,
    index: 0,
    title: {},
    legend: {},
    dataset:{},
    grid:{},
    axisPointer:{},
    xAxis:[],
    yAxis:[],
    polar:{},
    radiusAxis:{},
    angleAxis:{},
    radar:{},
    dataZoom:[],
    visualMap:{show: false},
    tooltip:{},
    toolbox:{},
    brush:{},
    geo:{},
    parallel:{},
    parallelAxis:{},
    singleAxis:{},
    timeline:{},
    series:[],
    color:[],
    backgroundColor:'',
    group:'',
    data:[],
    graphic:[],
    useUTC:true,
    _height:'',
    touchOffResize:false
  });

  const chartRef = ref(null)
  let myEcharts: echarts.ECharts




  onMounted(() => {
    myEcharts = Echarts.init(chartRef.value,themeEcharts);
    let option = setOption();
    myEcharts.setOption(option);
    watch(() => props, () => {
        option = setOption()
        myEcharts.setOption(option)
    })
  })
  const setOption = () => {
    let option = {
        title: props.title,
        legend: props.legend,
        toolbox: props.toolbox,
        grid: props.grid,
        xAxis: props.xAxis,
        yAxis: props.yAxis,
        series:props.series ,
        tooltip: props.tooltip,
        dataZoom: props.dataZoom
    };
    return option;
    
    
  }

   
</script>